<template>
  <div class="excel">
    <!-- <div class="options">
      <a-select
        :style="{ width: '320px' }"
        :options="sheetNames"
        :model-value="sheetName"
        @change="handleSelectChange"
      >
      </a-select>
    </div> -->
    <a-tabs>
      <a-tab-pane
        v-for="item in sheetNames"
        :key="item.value"
        :title="item.label"
        :lazy-load="true"
      >
        <xTable
          v-if="sheetNames.length > 0"
          :columns="initTable(item.value).columns"
          :data-source="initTable(item.value).tableData"
        >
        </xTable>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  // eslint-disable-next-line camelcase
  import { set_cptable, read, utils } from 'xlsx';
  import * as cptable from 'xlsx/dist/cpexcel.full.mjs';

  set_cptable(cptable);

  // 无法识别插入图片  无法使用数列表格布局
  export default defineComponent({
    props: {
      src: {
        type: String,
        default: '',
      },
    },
    setup: (props) => {
      const tableColumns: any = ref([]);
      const tableData: any = ref([]);
      const sheetNames: any = ref([]);
      const sheetName = ref();
      const xlsxData = ref();
      const scroll = ref({
        x: 800,
        height: 800,
      });
      const html = ref();

      const initTable = (value: string | number) => {
        html.value = utils.sheet_to_html(xlsxData.value.Sheets[value]);
        const data = utils.sheet_to_json(xlsxData.value.Sheets[value]);
        const columns = data
          .map((item: any) => Object.keys(item))
          .reduce((a, b) => {
            return a.concat(b);
          });
        scroll.value.x = columns.length * 6;
        return {
          columns: Array.from(new Set(columns || [])).map((item, index) => {
            return {
              title: item.indexOf('__EMPTY') !== -1 ? `` : item,
              // item.indexOf('__EMPTY') !== -1 ? `第1行${index + 1}列` : item
              dataIndex:
                item.indexOf('__EMPTY') !== -1 ? `第1行${index + 1}列` : item,
            };
          }),
          tableData: data.map((item: any) => {
            const temp: any = {};
            const keys = Object.keys(item);
            for (let i = 0; i < keys.length; i += 1) {
              const key = keys[i];
              if (key.indexOf('__EMPTY') !== -1) {
                temp[`第1行${i + 1}列`] = item[key];
              } else {
                temp[key] = item[key];
              }
            }
            return temp;
          }),
        };
        // tableColumns.value = Array.from(new Set(columns)).map((item, index) => {
        //   return {
        //     title:
        //       item.indexOf('__EMPTY') !== -1 ? `第1行${index + 1}列` : item,
        //     dataIndex:
        //       item.indexOf('__EMPTY') !== -1 ? `第1行${index + 1}列` : item,
        //   };
        // });
        // tableData.value = data.map((item: any) => {
        //   const temp: any = {};
        //   const keys = Object.keys(item);
        //   for (let i = 0; i < keys.length; i += 1) {
        //     const key = keys[i];
        //     if (key.indexOf('__EMPTY') !== -1) {
        //       temp[`第1行${i + 1}列`] = item[key];
        //     } else {
        //       temp[key] = item[key];
        //     }
        //   }
        //   return temp;
        // });
      };
      const getXlsxData = async () => {
        if (!props.src) {
          return;
        }
        let data: any = await fetch(props.src);
        if (data.status !== 200) {
          return;
        }
        data = await data.arrayBuffer();
        try {
          xlsxData.value = read(data);
          if (xlsxData.value.SheetNames.length > 0) {
            sheetNames.value = xlsxData.value.SheetNames.map((item: any) => ({
              label: item,
              value: item,
            }));
            sheetName.value = sheetNames.value[0].value;
            // initTable();
          }
        } catch (e) {
          throw new Error(e as string);
        }
      };
      // const handleSelectChange = (value: any) => {
      //   sheetName.value = value;
      //   initTable();
      // };
      watch(
        () => props.src,
        () => {
          tableColumns.value = [];
          tableData.value = [];
          sheetNames.value = [];
          sheetName.value = '';
          getXlsxData();
        },
        {
          deep: true,
          immediate: true,
        }
      );
      // props.src

      // getXlsxData();
      return {
        sheetNames,
        sheetName,
        tableColumns,
        tableData,
        scroll,
        html,
        // handleSelectChange,
        initTable,
      };
    },
  });
</script>

<style lang="less" scoped>
  .options {
    padding: 0 0 20px;
  }
  .excel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  :deep(.arco-tabs) {
    width: 100%;
  }
</style>
